<template>
    <view class="home-card">
        <view class="header">
            <text>{{ title }}</text>
            <text>更多</text>
        </view>
        <view class="body">
            <view class="item" v-for="e in dataList" :key="e.id" v-if="!custom"  @click="goDetail(e.id)">
                <image :src="e.picture"></image>
                <view class="name">{{ e.name }}</view>
                <view class="price">
                    <text>￥</text>
                    {{ e.price }}
                </view>
            </view>
            <slot></slot>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        title: String,
        dataList: {
            type: Array,
            default: function () {
                return []
            }
        },
        custom: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {}
    },
    methods: {
        goDetail(id) {
            if (id <= 3) id = 3529022
            uni.navigateTo({
                url: '/pages/detail/detail?id=' + id
            })
        }
    }
}
</script>

<style scoped lang="scss">
.home-card {
    background-color: white;
    margin-bottom: 20rpx;
    padding: 20rpx;
    border-radius: 8rpx;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #262626;
        font-size: 32rpx;
        margin-bottom: 20rpx;

        text:last-child {
            color: #7F7F7F;
            font-size: 24rpx;
            margin-left: 20rpx;
        }
    }

    .body {
        display: flex;
        justify-content: space-between;

        .item {
            width: 154rpx;
            text-align: center;

            image {
                width: 126rpx;
                height: 126rpx;
                border-radius: 6rpx;
            }

            .name {
                color: #262626;
                font-size: 24rpx;
                text-align: center;
                overflow: hidden;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin: 8rpx 0;
            }

            .price {
                color: #CF4444;
                font-size: 26rpx;

                text {
                    font-size: 18rpx;
                }
            }
        }
    }
}
</style>
